<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/index.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-box">
				<div class="searchnav">
				    <img src="images/search.png"/>
				</div>
				<div class="mui-slider">
				  <div class="mui-slider-group mui-slider-loop">
				    <div class="mui-slider-item"><a href="#"><img src="images/banner/banner1.png" /></a></div>
				    <div class="mui-slider-item"><a href="#"><img src="images/banner/banner2.png" /></a></div>
				    <div class="mui-slider-item"><a href="#"><img src="images/banner/banner3.png" /></a></div>
				  </div>
				</div>
				<div class="add1">
					<img src="images/add1.png"/>
				</div>
				<div class="mui-content">
			        <ul class="mui-table-view mui-grid-view mui-grid-9">
			            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
			                   <img src="images/nav/icon-coupon-notice.jpg"/></a></li>
			            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
			                    <img src="images/nav/icon-xyzp.jpg"/></a></li>
			            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
			                    <img src="images/nav/icon-bfxg.jpg"/></a></li>
			            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
			                    <img src="images/nav/icon-nfxg.jpg"/></a></li>
			            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
			                    <img src="images/nav/icon-gdxh.jpg"/></a></li>
			            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
			                    <img src="images/nav/icon-xyzp.jpg"/></a></li>
			            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
			                   <img src="images/nav/icon-ctcy.png"/></a></li>
			            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#">
			                   <img src="images/nav/icon-wgly.jpg"/></a></li>
			        </ul> 
		        </div>
		        <div class="star">
		        	<div class="starimg"><img src="images/xunluokuaibao.png"/></div>
				    <ul>
				        <li> 
				            <a href="ad.html">
				                              <p class="xunluokuaibao_p2">【特惠】大荔特产红不软鲜桃超值3斤装，省钱50%</p>
				            </a>
				        </li>
				        <li> 
				           <a href="ad.html">
				                       <p class="xunluokuaibao_p2">【特惠】大荔特产红不软鲜桃超值3斤装，省钱50%</p>
				           </a>
				        </li>
				    </ul>
				</div> 
				<div class="fqbox">
					<a href="#" class="fq1"><img src="images/goods1.png"/></a>
					<a href="#" class="fq2"><img src="images/goods2.png"/></a>
					<a href="#" class="fq3"><img src="images/goods3.png"/></a>
					<a href="#" class="fq4"><img src="images/goods4.png"/></a>
				</div>
				<div >
					 <a class="mui-tab-item mui-active">
			            <span class="mui-icon iconfont icon-nanzhuang"></span>
			            <span class="mui-tab-label">男装</span>
			        </a>
				</div>
			</div>  
		</div>

		<script src="js/util.js"></script>
		<script type="text/javascript">
			(function() {
				mui.init({
					swipeBack: true //启用右滑关闭功能
				});
				mui.plusReady(function() {
					var self = plus.webview.currentWebview(),
						leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中

					/**	
					 * drawNativeIcon 绘制带边框的半圆，
					 * 实现原理：
					 *   id为bg的tag 创建带边框的圆
					 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
					 * 	 id为iconBg的红色背景图
					 *   id为icon的字体图标
					 *   注意创建先后顺序，创建越晚的层级越高
					 */
					var drawNativeIcon = util.drawNative('icon', {
						bottom: '5px',
						left: leftPos + 'px',
						width: '60px',
						height: '60px'
					}, [{
						tag: 'rect',
						id: 'bg',
						position: {
							top: '1px',
							left: '0px',
							width: '100%',
							height: '100%'
						},
						rectStyles: {
							color: '#fff',
							radius: '50%',
							borderColor: '#ccc',
							borderWidth: '1px'
						}
					}, {
						tag: 'rect',
						id: 'bg2',
						position: {
							bottom: '-0.5px',
							left: '0px',
							width: '100%',
							height: '45px'
						},
						rectStyles: {
							color: '#fff'
						}
					}, {
						tag: 'rect',
						id: 'iconBg',
						position: {
							top: '5px',
							left: '5px',
							width: '50px',
							height: '50px'
						},
						rectStyles: {
							color: '#d74b28',
							radius: '50%'
						}
					},  {
						tag: 'font',
						id: 'icon',
						text: '玩游戏', //此为字体图标Unicode码'\e600'转换为'\ue600'
						position: {
							top: '0px',
							left: '5px',
							width: '50px',
							height: '100%'
						},
						textStyles: {
							fontSrc: '_www/fonts/iconfont.ttf',
							align: 'center',
							color: '#fff',
							size: '12px'
						}
					}]);
					// append 到父webview中
					self.append(drawNativeIcon);

					//自定义监听图标点击事件
					var active_color = '#fff';
					drawNativeIcon.addEventListener('click', function(e) {
					    plus.webview.open('html/game.html');
					});
					// 中间凸起图标绘制及监听点击完毕

					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);
					
					var nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;
					
						
					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.25)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
							currIndex = 1;
						} else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
							currIndex = 2;
						} else {
							currIndex = 3;
						}
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}

						if(targetPage == activePage) {
							return;
						}

						
							util.toggleNview(currIndex);
							// 子页面切换
							util.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
					});
				});
			})();
			
			var idx = 0;  
		          setInterval(function(){
		            idx++;
		            $(".star ul").animate({"top":-60*idx},600,function(){
		              if(idx >= $(".star ul li").length){
		                idx = 0;
		                $(".star ul").css("top",0);
		              }
		            });
		    },1600);
		</script>
	</body>  

</html>